import React, { PureComponent } from 'react'

// 1、redux在react中的使用
// import Home from './pages/Home'
// import About from './pages/About'

// 2、由于Home和About组件中的代码基本相同，仅state和dispatch不同，
// 因而进行相应的抽取将其作为函数参数传入,在utils中封装函数connect实现
// import Home from './pages/HomeConnect'
// import About from './pages/AboutConnect'

// 3、为使得connect更通用，使用context对其进行进一步处理，使其与业务逻辑无关，其他人也可使用
// import Home from './pages/HomeConnect2'
// import About from './pages/AboutConnect2'

// 4、使用react-redux库实现
// import Home from './pages/HomeConnectReactRedux'
// import About from './pages/AboutConnectReactRedux'

// 5、组件中异步操作（网络请求），使用redux
// import ReduxAxios from './pages/ReduxAxios'

// 6、使用中间件redux-thunk实现在redux中执行异步操作
// import ReduxThunkAxios from './pages/ReduxThunkAxios'

// 7、使用中间件redux-saga实现在redux中执行异步操作
// import ReduxSagaAxios from './pages/ReduxSagaAxios'

// 8、reducer的拆分--简易
// import Home from './pages/HomeConnectReactReduxSplitSimple'
// import About from './pages/AboutConnectReactReduxSplitSimple'
// import ReduxSagaAxiosSplitSimple from './pages/ReduxSagaAxiosSplitSimple'

// 9、reducer的拆分--分组
import Home from './pages/HomeConnectReactReduxSplitGroup'
import About from './pages/AboutConnectReactReduxSplitGroup'
import ReduxSagaAxiosSplitGroup from './pages/ReduxSagaAxiosSplitGroup'

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <h2>redux在react中的使用</h2>
        <Home />
        <About />
        <hr />
        {/* 异步操作示例 */}
        {/* <ReduxAxios />   */}
        {/* 使用redux-thunk中间件实现异步操作 */}
        {/* <ReduxThunkAxios /> */}
        {/* 使用redux-thunk中间件实现异步操作 */}
        {/* <ReduxSagaAxios /> */}
        {/* reducer的拆分--简易 */}
        {/* <ReduxSagaAxiosSplitSimple /> */}
        {/* reducer的拆分--分组 */}
        <ReduxSagaAxiosSplitGroup />
      </div>
    )
  }
}
